<template>
  <svg :style="iconStyle" aria-hidden="true">
    <use :xlink:href="symbolId" />
  </svg>
</template>

<script setup lang="ts" name="SvgIcon">
  import { computed, CSSProperties } from "vue"

  interface SvgProps {
    name: string // 图标的名称 ==> 必传
    prefix?: string // 图标的前缀 ==> 非必传（默认为"icon"）
    iconStyle?: CSSProperties // 图标的样式 ==> 非必传
  }

  const props = withDefaults(defineProps<SvgProps>(), {
    prefix: "icon",
    iconStyle: () => ({ width: "100px", height: "100px" })
  })

  const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>
